<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>检验报告</title>
    <link rel="stylesheet" href="/Public/css/result.css">
</head>
<body>
<div class="container">
    <div class="top-bar">
        <h1>学A教育单词突击赢单词测试报告 
            <a href="<?php echo U('Student/index');?>">回到首页</a>
            <a href="javascript:;">发送邮件</a>
        </h1>
        <div class="user-info" sid="<?php echo ($s_info["student_id"]); ?>" d1="<?php echo ($s_info["d1"]); ?>" d2="<?php echo ($s_info["d2"]); ?>" d3="<?php echo ($s_info["d3"]); ?>">
            <div class="u-cell">姓名：<span><?php echo ($s_info["s_name"]); ?></span></div>
            <div class="u-cell">电话：<span><?php echo ($s_info["tel"]); ?></span></div>
        </div>
    </div>
    <div class="main">
        <div class="result-wrap">
            <h2>单词量测试概况：</h2>

            <div class="pass-rate-box">
                <div class="pass_rate">
                   <canvas height="194" width="194"></canvas>
                   <div class="bor_bg">
                      <span class="toptitle">单词量</span>
                      <span class="downnum pb_ellipsis ng-binding"></span>
                   </div>
                </div>
                <p class="pargram-rate-name">总词量:15000</p>
            </div>

            <div class="pass-loc">
                <div class="item">
                    <div class="item-l">平均得分率</div>
                    <div class="item-r">
                        <div class="color-bar">
                            <div class="inner-bar" style="width: 80%"></div>
                            <span>88</span>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="item-l">我的得分率</div>
                    <div class="item-r">
                        <div class="color-bar my">
                            <div class="inner-bar"></div>
                            <span></span>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="item-l">成绩等级</div>
                    <div class="item-r">
                        <div class="color-bar deg">
                            <div class="inner-bar"></div>
                            <i class="d">D</i>
                            <i class="c">C</i>
                            <i class="b">B</i>
                            <i class="a">A</i>
                        </div>
                    </div>
                </div>
                <p>成绩分布如下：A级为100%,B级为90%,C级为80%,D级为70%,小于60%不记入等级</p>

            </div>
            <div class="clear"></div>
        </div>

        <div class="analyze-wrap">
            <h2>中高考题型单词量分析:</h2>
            <div class="ana-chart-warp">
                <div class="ana-chart-cell">
                    <div class="chart-cell" id="ana1">
                    </div>
                    <p class="name">听力单词量</p>
                    
                </div>

                <div class="ana-chart-cell">
                    <div class="chart-cell" id="ana2">
                    </div>
                    <p class="name">完型单词量</p>
                    
                </div>

                <div class="ana-chart-cell">
                    <div class="chart-cell" id="ana3">
                    </div>
                    <p class="name">阅读单词量</p>
                    
                </div>

                <div class="ana-chart-cell">
                    <div class="chart-cell" id="ana4">
                    </div>
                    <p class="name">作文单词量</p>
                    
                </div>
                
            </div>
            <div class="bottom-bar">
                <span class="my">我的词量</span>
                <span class="middle">中考词量</span>
                <span class="high">高考词量</span>
            </div>

        </div>

        <div class="point-wrap">
            <h2>学习提升建议:</h2>
            <div class="chart">
                <!-- 我的目标 -->
                <div class="user-goal">
                    <div class="goal-wrap">
                        <div class="goal-title">科目类型(单位:%)</div>
                        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                        <div class="goal-table" id="myGoal">
                            
                        </div>
                        <div class="goal-tips">
                            <span class="goal">中考英语词量</span>
                            <span class="done">高考英语词量</span>
                          <!--   <span class="my-done">阅读单词</span>
                            <span class="arti">作文单词</span> -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="tips">
                <p>坚持努力记忆单词，下次<br>考试遇到题目肯定能<br>迎刃而解，<i>单词突击赢</i>为你加油！</p>
            </div>
            <div class="clear"></div>
        </div>
        

    </div>
    
</div>
<div class="email-mask">
    <div class="email-dialog">
        <h1>邮件发送给：</h1>
        <div class="middle-bar">
            <span>邮箱地址:</span>
            <input type="text" id="email" />
        </div>
        <div class="btns">
            <button type="button" class="cancel">取消</button>
            <button type="button" class="sent">发送</button>
        </div>
    </div>
</div>

<script src="/Public/js/jquery-1.11.1.min.js"></script>
<script src="/Public/js/echarts.simple.min.js"></script>
<script>
var d1=parseInt($('.user-info').attr('d1')),
    d2=parseInt($('.user-info').attr('d2')),
    d3=parseInt($('.user-info').attr('d3'));

function getResult(d1,d2,d3){
    if(d1<30){
        return d1*51;
    }else if((d1==30) &&(d2<15)){
        return d1*51 +d2*162;
    }else if((d1==30) &&(d2==15) &&(d3<=5)){
        return d1*51+d2*162+d3*610;
    }
};

// var myResult =d1*51+d2*162+d3*610;
var myResult =getResult(d1,d2,d3);

// canvas画圆圈饼
draw = function(allCount,finishCount){
    var canvas = $('canvas')[0];
    ctx = canvas.getContext("2d");
    ctx.beginPath();
    degree=(finishCount/allCount).toFixed(2);

    ctx.arc(98,98,100,1.5*Math.PI,1.5*Math.PI*(1-degree/0.75),true);

    ctx.lineTo(100, 100);
    ctx.fillStyle = "#11a6e6";
    ctx.fill();
    ctx.closePath();
};
draw(15000,myResult);
$('.downnum').text(myResult);

// 我的得分率
var myPer = parseInt((d1+d2+d3)*100/50);
$('.my').find('.inner-bar').css({"width":myPer+'%'}).end().find('span').text(myPer);



// var myChart = echarts.init(document.getElementById('myGoal'));
// 我的目标设置
function getPointOpt(easy,middle,hard,super1){
    return {
        grid: {
            left: '-5%',
            right: '4%',
            bottom: '0',
            top: '0',
            containLabel: true
        },
        xAxis : [
            {
                type : 'value'
            }
        ],
        yAxis : [
            {
                type : 'category',
                axisTick : {show: false},
                data : []
            }
        ],
        series : [
            {
                // name:'本月目标',
                type:'bar',
                label: {
                    normal: {
                        show: true
                    }
                },
                itemStyle:{
                    normal:{color:'#8ee0ff'}
                },
                data:[easy]
            },
            {
                // name:'已创收',
                type:'bar',
                label: {
                    normal: {
                        show: true
                    }
                },
                itemStyle:{
                    normal:{color:'#ffa9a2'}
                },
                data:[middle]
            },
            {
                // name:'我的收成',
                type:'bar',
                label: {
                    normal: {
                        show: true
                    }
                },
                itemStyle:{
                    normal:{color:'#b5e7b4'}
                },
                data:[hard]
            },
            {
                // name:'我的收成',
                type:'bar',
                label: {
                    normal: {
                        show: true
                    }
                },
                itemStyle:{
                    normal:{color:'#fcb428'}
                },
                data:[super1]
            }

        ]
    };
}
// var pointOpt =getPointOpt(2800,2600,3530,3200); 

// 使用刚指定的配置项和数据显示图表。
// myChart.setOption(pointOpt);


// 词量分析中间部分的控制
var ana1 = echarts.init(document.getElementById('ana1'));
var ana2 = echarts.init(document.getElementById('ana2'));
var ana3 = echarts.init(document.getElementById('ana3'));
var ana4 = echarts.init(document.getElementById('ana4'));
function getAnaOpt(my,middle,high){
    return {
        grid: {
            left: '20%',
            top: '10%',
            bottom: '12%'
        },
        
        tooltip : {

            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
        },
        
        calculable : true,
        xAxis : [
            {
                type : 'category',
                // data : ['Cosco','CMA']
                data: []
            }
        ],
        yAxis : [
            {
                type : 'value',
                boundaryGap: [0, 0.1]
            }
        ],
        series : [
            // {
            //     name:'Acutal',
            //     type:'bar',
            //     stack: 'sum',
            //     barCategoryGap: '50%',
            //     itemStyle: {
            //         normal: {
            //             color: "#ffa9a2",
            //             label : {
            //                 show: true, position: 'insideTop'
            //             }
            //         }
            //     },
            //     data:[260, 200]
            // }

            {
                type:'bar',
                label: {
                    normal: {
                        show: true
                    }
                },
                itemStyle:{
                    normal:{color:'#ffa9a2'}
                },
                data:[my]
            },
            {
                type:'bar',
                label: {
                    normal: {
                        show: true
                    }
                },
                itemStyle:{
                    normal:{color:'#8ee0ff'}
                },
                data:[middle]
            },
            {
                type:'bar',
                label: {
                    normal: {
                        show: true
                    }
                },
                itemStyle:{
                    normal:{color:'#b5e7b4'}
                },
                data:[high]
            }
            
        ]
    };
};

var apa1 =((myResult-320)>0) ? (myResult-320): 62,
    apa2 =((myResult-362)>0) ? (myResult-362): 88,
    apa3 =myResult,
    apa4 =((myResult-320)>0) ? (myResult-133): 94;

var optAna1=getAnaOpt(apa1,1200,3000),
    optAna2=getAnaOpt(apa2,2000,4000),
    optAna3=getAnaOpt(apa3,3000,5000),
    optAna4=getAnaOpt(apa4,1600,3500);
ana1.setOption(optAna1);
ana2.setOption(optAna2);
ana3.setOption(optAna3);
ana4.setOption(optAna4);

var myChart = echarts.init(document.getElementById('myGoal'));
function getPoint(m1,m2,m3,m4,h1,h2,h3,h4){
    return {
        legend: {
            data: ['bar1', 'bar2']
        },
        grid: {
            left: '5%',
            right: '4%',
            bottom: '0',
            top: '5%',
            containLabel: true
        },
        xAxis: {
            triggerEvent:true,
            data: ['听力', '完型', '阅读', '作文']
        },
        yAxis: {},
        series: [{
            name: 'bar1',
            type: 'bar',
            itemStyle: {
                normal: {
                    color: '#8ee0ff'
                }
            },
            data: [m1, m2, m3, m4]
        }, {
            name: 'bar2',
            type: 'bar',
            itemStyle: {
                normal: {
                    color: '#ffa9a2'
                }
            },
            data: [h1, h2, h3, h4]
        }]
    };
};

// 获取提升比例函数
function CarryUpPer(my,goal){
    if(my>=goal){
        return 0;
    }else{
        return parseInt((goal-my)*100/goal);
    }
};

var m1 = CarryUpPer(myResult,1200),
    m2 = CarryUpPer(myResult,2000),
    m3 = CarryUpPer(myResult,3000),
    m4 = CarryUpPer(myResult,1600),
    h1 = CarryUpPer(myResult,3000),
    h2 = CarryUpPer(myResult,4000),
    h3 = CarryUpPer(myResult,5000),
    h4 = CarryUpPer(myResult,3500);
myChart.setOption(getPoint(m1,m2,m3,m4,h1,h2,h3,h4));


// $(".top-bar a").eq(1).click(function(){
//     $('.email-mask').show();
// });
$(".email-mask .cancel").click(function(){
    $('.email-mask').hide();
});
$(".email-mask .sent").click(function(){
    var _email = $.trim($("#email").val()),
        _name = $.trim($(".user-info span").eq(0).text()),
        _url = document.URL;

    if(_email ==''){
        alert('邮箱不能为空哦!');
        return false;
    }

    if(!/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(_email)){
        alert('邮件不对呀，哥!');
        return false;
    }
    $.ajax({
        type:'post',
        url: "<?php echo U('Result/sent');?>",
        data: {
            "addr": _email,
            "name": _name,
            "url": _url
        },
        success: function(data){
            if(data=="success"){
                alert("成绩已发送到您邮件！");
                $('.email-mask').hide();
            }
            
        }
    });
    
});
</script>
</body>
</html>